<template>
	<view class="navigation-bar-com" 
		:style="{
			paddingTop: `${menuButtonInfo.top}px`,
			height: `${menuButtonInfo.bottom + 5}px`,
			background: backgroundColor
		}"
	>
		<view 
			:style="{
				height: `${menuButtonInfo.height}px`
			}"
			class="navigation-bar-warpper"
		>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'navigation-bar-com',
	emits: ['init'],
	props: {
		title: {
			default: '标题',
			type: String
		},
		back: {
			default: false,
			type: Boolean
		},
		titleColor: {
			default: '#000',
			type: String
		},
		backgroundColor: {
			default: 'none',
			type: String
		}
	},
	data(){
		return{
			menuButtonInfo: {}
		}
	},
	created(){
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		this.menuButtonInfo = menuButtonInfo
		this.$emit('init', this.menuButtonInfo)
	}
}
</script>

<style lang="scss" scoped>
	.navigation-bar-com{
		box-sizing: border-box;
		position: relative;
		width: 750rpx;
		color: #fff;
		.navigation-bar-warpper{
			width: 750rpx;
		}
	}
</style>